<template>
  <div class="detailvideo-box page-content" v-wechat-title="ymtitle">
    <div class="video_box">
      <div class="video_content">
        <div class="video">
          <div class="player-container">
            <!-- <video-player
              v-if="playerOptions.sources[0].src.length>0"
              ref="videoPlayer"
              :playsinline="true"
              class="vjs-custom-skin"
              :options="playerOptions"
              @play="onPlayerPlay(player)"
            ></video-player> -->
            <video
              id="music_mp3_0"
              class="myvideo"
              v-if="playerOptions.sources[0].src.length>0"
              :poster="playerOptions.poster"
              x5-playsinline="true"
              webkit-playsinline="true"
              playsinline="true"
              autoplay
              controls
              :src="playerOptions.sources[0].src"
            >
              <source src="" type="video/mp4">
            </video>
          </div>
        </div>
        <div class="title">
          {{title}}
        </div>
      </div>
    </div>
    <div class="list">
      <div class="list_content">
        <div class="item" v-for="(item, index) in dataarr" :key="index" @click="handleclick(item)">
          <div class="item_left">
            <img :src="item.cover_img" alt="暂无封面">
            <span></span>
          </div>
          <div class="item_right">
            {{item.name}}
          </div>
        </div>
      </div>
    </div>
    <wx/>
  </div>
</template>

<script>
// 引入video样式
// import 'video.js/dist/video-js.css'
import { getUrlParams } from '../../static/js/utils.js'
import { getVideo } from 'api/home-api'
import wx from './wx'
// 引入hls.js
import 'videojs-contrib-hls'
export default {
  name: 'Detail',
  data() {
    return {
      dataarr: [],
      title: '强势品牌，实力传播',
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: true, // 如果true,浏览器准备好时开始回放。
        controls: true, // 控制条
        preload: 'auto', // 视频预加载
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4',
          src: '' // 你所放置的视频的地址，最好是放在服务器上
        }],
        poster: '', // 你的封面地址（覆盖在视频上面的图片）
        width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试' // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
      },
      ymtitle: ''
    }
  },
  components: { wx },
  computed: {
    player () {
      return this.$refs.videoPlayer.player
    }
  },
  created () {
    var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
    this.ymtitle = user['app_name']
    this.getVideo()
  },
  mounted () {
    // this.autoPlayvideo()
  },
  methods: {
    tohome() {
      this.$router.goBack()
    },
    add() {
      this.data++
    },
    // 点击视频切换视频
    handleclick (value) {
      this.playerOptions.sources[0].src = ''
      this.playerOptions.poster = value.cover_img
      this.playerOptions.sources[0].src = value.path
      this.title = value.name
      this.$nextTick(function() {
        var musicEle0 = document.getElementById('music_mp3_0')
        if (typeof window.WeixinJSBridge === 'object' && typeof window.WeixinJSBridge.invoke === 'function') {
          window.WeixinJSBridge.invoke('getNetworkType', {}, function(res) {
            musicEle0.play()
          })
        } else {
          musicEle0.play()
        }
      })
    },
    // 获取视频
    getVideo () {
      var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
      var param = {
        app_id: user['app_id']
      }
      getVideo(param).then(data => {
        this.dataarr = data.data
        if (data.data.length > 0) {
          var obj = data.data[0]
          if (getUrlParams('id')) {
            data.data.map(item => {
              if (item.id === getUrlParams('id') || ('' + item.id) === getUrlParams('id')) {
                obj = item
              }
            })
          }
          // this.playerOptions.poster = data.data[0].cover_img
          // this.playerOptions.sources[0].src = data.data[0].path
          this.playerOptions.poster = obj.cover_img
          this.playerOptions.sources[0].src = obj.path
          this.playerOptions.src = obj.path
          this.title = obj.name
          // --创建页面监听，页面加载完毕--触发音频播放
          document.addEventListener('DOMContentLoaded', function () {
            function audioAutoPlay() {
              var musicEle0 = document.getElementById('music_mp3_0')
              musicEle0.play()
            }
            audioAutoPlay()
          })
          // --创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
          document.addEventListener('touchstart', function () {
            function audioAutoPlay() {
              var musicEle0 = document.getElementById('music_mp3_0')
              musicEle0 && musicEle0.play()
            }
            audioAutoPlay()
          })
          document.addEventListener('WeixinJSBridgeReady', function() {
            var musicEle0 = document.getElementById('music_mp3_0')
            musicEle0.play()
          }, false)
          this.$nextTick(function() {
            var musicEle0 = document.getElementById('music_mp3_0')
            if (typeof window.WeixinJSBridge === 'object' && typeof window.WeixinJSBridge.invoke === 'function') {
              window.WeixinJSBridge.invoke('getNetworkType', {}, function(res) {
                musicEle0.play()
              })
            } else {
              musicEle0.play()
            }
          })
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "~styles/index.less";
@import "~styles/variable.less";
.detailvideo-box{
  background: #FFF;
  width: 100%;
  .video_box{
    .h(554);
    width: 100%;
    .video_content{
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      z-index: 20;
    }
  }
  button{
    outline: none;
  }
  .myvideo,.video{
    width: 100%;
    .h(422);
    background: #000;
    .video-js .vjs-big-play-button .vjs-icon-placeholder:before{
      background: #000;
    }
  }
  .title{
    .h(132);
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 6px 0px rgba(246,246,246,1);
    .fs(36);
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(70,70,70,1);
    .t-indent(36);
    text-align: left;
    .lh(66);
  }
  .list{
    width: 92.22%;
    background:rgba(255,255,255,1);
    margin: 0 auto;
    .mt(20);
    box-shadow:0px 2px 6px 0px rgba(227,227,227,0.5);
    .b-radius(12);
    .list_content{
      .w(630);
      margin: 0 auto;
      .item{
        .pt(38);
        .h(188);
        .pb(38);
        .b-bottom(2, #F5F5F5);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .item_left{
          position: relative;
          .w(300);
          .h(188);
          img{
            .w(300);
            .h(188);
            .b-radius(12);
          }
          span{
            .w(70);
            .h(70);
            display: inline-block;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-size: 100%;
            background-image: url("../assets/share/play.png");
          }
        }
        .item_right{
          .w(280);
          display: inline-block;
          height: 80%;
          .ml(36);
          .fs(28);
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(70,70,70,1);
          .lh(40);
          text-align: left;
          vertical-align: middle;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
